<template>
<view class="sku-calendar sku-choose-block">
  <view class="calendar-header">
    <view class="time-title sku-choose-block-title" >
      <basic-icons name="icon39" size="32rpx" padding="0 6rpx 0 0"/>
      <text>请选择出游时间</text>
      <text
        v-if="chooseDate && !showCalendar"
        class="rechoose-text"
        @click="showCalendar = true">重新选择</text>
    </view>
    <view class="choose-result" v-if="chooseDate && !showCalendar">{{chooseDate}}</view>
  </view>
  <view v-show="showCalendar">
    <calendar
    ref="calendar"
    :date="chooseDate"
    :startDate="today"
    :showMonth="false"
    :disableDateFunction="disableDateFunction"
    :descRenderFunction="descRenderFunction"
    @change="dateChange">
  </calendar>
  </view>
</view>
</template>
<script>
import calendar from './calendar.vue'
import storage from 'utils/helper/storage'
import {dateFormat} from 'utils/helper/date-handle'
import {cent2Yuan} from '@/filter/filters'

export default {
  name: 'sku-calendar',
  components: { calendar },

  props: {
    value: {
      type: String,
      default: ''
    },
    enabledDates: {
      type: Object,
      default: null
    }
  },

  watch: {
    value(val, oldVal) {
      if (val !== this.chooseDate) {
        this.chooseDate = val
      }
    },
    enabledDates(val, oldVal) {
      this.$refs.calendar && this.$refs.calendar.initWeeks()
    }
  },

  data() {
    return {
      skuList: [],
      today: dateFormat(), // 今日之前都不可订
      chooseDate: '',
      showCalendar: true // 是否显示日历
    }
  },

  methods: {
    dateChange(val) {
      this.$emit('change', val)
      this.showCalendar = false
    },
    /**
     * 日期禁用选择函数
     * @param {String} dateString
     * @return {Boolean} disabled
     */
    disableDateFunction(dateString) {
      // console.log('this.enabledDates', this.enabledDates)
      if (this.enabledDates && this.enabledDates.hasOwnProperty(dateString + ' 00:00:00')) {
        return false
      } else {
        return true
      }
    },
    /**
     * 日期描述信息渲染函数
     * @param {String} dateString 
     * @return {String} desc
     */
    descRenderFunction(dateString) {
      if (this.enabledDates && this.enabledDates.hasOwnProperty(dateString + ' 00:00:00')) {
        return this.enabledDates[dateString + ' 00:00:00']
      } else {
        return ''
      }
    }
  }
}
</script>
<style lang="less">
.sku-calendar {
  padding: 30rpx 0 !important;
  .calendar-header {
    // background-color: #fff;
    padding: 0 30rpx;

    .time-title {
      .flex;
      .flex-middle;
    }

    .rechoose-text {
      .flex-1;
      text-align: right;
      color: @theme_color;
    }

    .choose-result {
      font-size: 32rpx;
      line-height: 44rpx;
      margin-top: 30rpx;
      
    }
  }
}

</style>